<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../cssClass/titleBarCss.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        h2 {
            font-size: 1.5rem;
            text-align: center;
            color: rgb(68, 123, 103);
            padding: 10px;
        }

        #message-list {
            margin-top: 20px;
            width: 100%;
            text-align: start;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 5px 5px 15px rgba(68, 123, 103, 0.5);
        }

        #message-list li {
            border-bottom: 1px solid rgba(154, 135, 135, 0.571);
            padding: 10px 10px 20px 10px;
        }
    </style>
</head>

<body>

    <div style="width: 80%;margin: auto;">
        <!-- 头部背景+头像+登录+注册 -->
        <div class="main_div">
            <div class="main_title">
                <span class="main_title_span">王大头</span>
            </div>

        </div>
        <!-- 头部table -->
        <div class="title-bar">
            <div class="title-bar-container">
                <h1 class="title-bar-title">My Website</h1>
                <nav class="title-bar-nav">
                    <ul class="titlebar">
                        <li><a href="./index.html#content11" class="nav-link">Home</a></li>
                        <li><a href="./index.html#content22" class="nav-link">article</a></li>
                        <li onclick="jumpToFn('about')"> 关于我们
                        </li>
                        <li onclick="jumpToFn('novel')">最新文章</li>
                        <li class="active" onclick="jumpToFn('message')">给我留言</li>
                    </ul>
                </nav>
            </div>
        </div>
        <h2 style="margin-top: 20px;font-size: 20px;">给我留言</h2>
        <div class="row">
            <div class="headingMessage">
                <!-- Heading -->
                <h2 style="text-align: start;">请在这里给我写留言便签条</h2>
                <p>Thank you for visiting out my blog. If you would like to leave a message, please fill out the
                    form
                    below.</p>
            </div>
        </div>
        <div class="MyMessage_div">
            <div class="max-w-sm mx-auto bg-white shadow-md rounded-lg p-6 mt-10">
                <h2 class="text-center text-2xl font-bold mb-6">留言板</h2>
                <form id="message-form">
                    <div class="mb-4">
                        <label for="name" class="block mb-2 text-sm font-bold text-gray-700">姓名</label>
                        <input type="text" id="name-input" name="name"
                            class="w-full px-3 py-2 leading-tight text-gray-700 border rounded shadow appearance-none focus:outline-none focus:shadow-outline"
                            placeholder="请输入您的姓名">
                    </div>
                    <div class="mb-6">
                        <label for="message" class="block mb-2 text-sm font-bold text-gray-700">留言</label>
                        <textarea id="message-input" name="message" rows="4"
                            class="w-full px-3 py-2 text-gray-700 border rounded shadow appearance-none resize-none focus:outline-none focus:shadow-outline"
                            placeholder="请输入您的留言"></textarea>
                    </div>
                    <div class="text-center">
                        <button type="submit"
                            class="w-full px-4 py-2 font-bold text-white bg-blue-500 rounded shadow hover:bg-blue-600 focus:outline-none focus:shadow-outline">提交</button>
                    </div>
                </form>
            </div>

        </div>
        <h2 style="text-align: start;">最新留言</h2>
        <ul id="message-list">
            <li><strong>棕榈树先生</strong>: Hello World！</li>
        </ul>
    </div>
</body>

</html>
<script src="../jsStyle/me.js"></script>
<script>
    function jumpToFn(item) {
        let isUrl;
        if (item == "login") {
            isUrl = "./login.html";
        } else if (item == "about") {
            isUrl = "./about.html";
        } else if (item == "register") {
            isUrl = "./register.html";
        } else if (item == "novel") {
            isUrl = "../electronicBook/index.html";
        } else if (item == "message") {
            isUrl = "./message.html";
        }
        window.location.href = isUrl;
    }
</script>